<template>
  <view class="centre">
    <view class="card">
      <view class="user-card">
        <image
          :src="
            store.userInfo.avatarUrl
              ? store.userInfo.avatarUrl
              : 'https://img2.baidu.com/it/u=2893147358,3393430132&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
          "
          mode="aspectFill"
        />
        <view>
          <view class="info">
            <text class="name" v-if="store.userInfo.userName">{{
              store.userInfo.userName
            }}</text>
            <text class="name" v-else @click="gotoLogin">点击登录</text>
            <text
              class="iconfont icon-nvsheng"
              v-if="store.userInfo.gender != null"
            ></text>
          </view>
        </view>
      </view>
      <view class="advertisement">
        <image
          src="https://pic.20988.xyz/2024-05-24/1716515135-417718-gif-4.gif"
          mode="scaleToFill"
        />
      </view>
      <view class="tool">
        <view class="item flex" v-for="(item, index) in card_list" :key="index">
          <view class="item-li">
            <image :src="item.img" mode="scaleToFill" />
            <text>{{ item.title }}</text>
          </view>
          <u-icon name="arrow-right" color="#91949a" size="28rpx"></u-icon>
        </view>
      </view>
      <view class="footer" @click="loginOut">
        <text>退出登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { locaImgs } from '@/utils/imgs.js'
import { useCounterStore } from '@/store/counter.js'
const store = useCounterStore()
const card_list = ref([
  {
    img: locaImgs('card1'),
    title: '我的信息',
    url: '/pages/user/info'
  },
  {
    img: locaImgs('card2'),
    title: '留言',
    url: '/pages/user/message'
  },
  {
    img: locaImgs('card3'),
    title: '刷新'
  },
  {
    img: locaImgs('card4'),
    title: '关于我们'
  }
])
// 点击去登录页面
function gotoLogin() {
  uni.navigateTo({
    url: '/pages/user/login'
  })
}
// 退出登录
function loginOut() {
  uni.showModal({
    title: '提示',
    content: '是否退出登录？',
    success(res) {
      if (res.confirm) {
        uni.clearStorage()
        store.userInfo = {}
      } else {
        console.log('用户取消了退出登录操作')
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.centre {
  width: 100%;
  height: 100vh;
  background: url('https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/appImg/userZX.jpg')
    no-repeat center top / cover;
  position: relative;
  padding: 0 20rpx;
  box-sizing: border-box;
  .card {
    position: absolute;
    top: 26%;
    left: 0;
    width: 100%;
    height: 80vh;
    background: #f8f8f8;
    border-radius: 40rpx 40rpx 0 0;

    .user-card {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #333;
      z-index: 10;
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
      }
      .info {
        text-align: center;
        font-weight: bold;
        .iconfont {
          margin-left: 10rpx;
        }
        .icon-nvsheng {
          color: #d4237a;
        }
        .icon-zhidingmian {
          color: #70c3f2;
        }
      }
    }
    .advertisement {
      width: 90%;
      border-radius: 40rpx;
      position: absolute;
      top: 12%;
      left: 50%;
      transform: translate(-50%, -50%);
      image {
        width: 70%;
        height: 300rpx;
      }
    }
    .tool {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      background: #ffffff;
      border-radius: 40rpx 40rpx;
      box-shadow: 0 0 20rpx rgba(255, 252, 252, 0.8),
        0 0 40rpx rgba(255, 255, 255, 0.6), 0 0 60rpx rgba(255, 255, 255, 0.4);
      padding: 20rpx 20rpx;
      box-sizing: border-box;
      .item {
        width: 100%;
        border-bottom: 2rpx solid #f8f8f8;
        padding: 20rpx 0;
        .item-li {
          display: flex;
          align-items: center;
          color: #333;
          font-size: 28rpx;
          image {
            width: 50rpx;
            height: 50rpx;
            vertical-align: middle;
            margin-right: 10rpx;
          }
        }
        .iconfont {
          font-size: 74rpx;
        }
      }
    }
    .footer {
      position: absolute;
      left: 50%;
      bottom: 10%;
      transform: translate(-50%, -50%);
      width: 80%;
      text-align: center;
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
      background: #fda100;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
    }
  }
}
</style>
